<template>
  <div class="imgBox">
    <img src="http://47.93.101.203/static/img/noShopper.70ac1689.png" alt="" />
    <van-divider
      :style="{
        color: '#000',
        borderColor: '#000',
        padding: '0 80px',
        marginTop: '50px',
      }"
    >
      热门推荐
    </van-divider>
    <div class="list_box">
      <dl v-for="(v, i) in hotInfo" :key="i">
        <dd><img v-lazy="v.image" alt="" /></dd>
        <dt>
          <p class="line1">
            {{ v.store_name }}
          </p>

          <span>￥{{ v.price }}</span>
          <p class="ys">已售{{ v.sales }}件</p>
        </dt>
      </dl>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  hotInfo: {
    type: Array,
    default: "",
  },
});
</script>

<style lang="less">
.imgBox {
  // padding: 100px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  // align-items: center;
  img {
    width: 200px;
    height: 170px;
    margin: 0 auto;
  }
}
.list_box {
  background: #f5f5f5;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  dl {
    margin: 5px 2.5%;
    width: 45%;
    border-radius: 10px;
    background: #fff;

    dd {
      width: 100%;
      height: 173px;
      img {
        width: 100%;
        height: 170px;
        border-radius: 10px 10px 0 0;
      }
    }

    dt {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 5px;
      p {
        font-size: 16px;
      }
      .ys {
        font-size: 12px;
        color: #aaa;
      }
      s {
        font-size: 13px;
        color: #aaa;
      }
      span {
        color: rgb(249, 84, 41);
        font-size: 18px;
        font-weight: 550;
      }
    }
  }
}
</style>
